<template>
  <div>
    <el-button type="primary" size="mini" @click="openEdit(row_id)">{{$t('attendance.view')}}</el-button>
    <el-dialog :visible.sync="dialogTableVisible" v-if="dialogTableVisible" :title="$t('table.roster')" width="50%" top="3%">
      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row :header-cell-style="{
            background: '#f2f2f2',
            color: '#606266',
            height: '10px',
            padding: '5px'
          }" height="640px" width="80%" :row-style="{ height: '40px', padding: '0px' }" :cell-style="{ padding: '0px' }">
        <el-table-column :label="$t('table.worker_id')" align="center">
          <template slot-scope="scope">
            {{ scope.row.person_id}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.worker_name')" align="center">
          <template slot-scope="scope">
            {{ scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.company')" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.company }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.department')" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.department }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import store from "@/store";
import editPage from "./editPage";
import addPage from "./addPage";
import { getStaffList } from "@/api/attendance_management/attendanceShift";
export default {
  props: {
    row_id: {
      type: Number,
      default: function () {
        return null;
      },
    },
  },
  components: {
    editPage,
    addPage,
  },
  data() {
    return {
      list: null,
      listLoading: true,
      dialogTableVisible:false,
    };
  },
  created() {
  },
  methods: {
    openEdit(row_id) {
      (this.dialogTableVisible = true),
        // 根据id获取数据信息
        getStaffList(store.getters.token, { schedule_id: row_id }).then((res) => {
          console.log(res, "rrrrrrrrrrrrrrrrrrrrrrr");
          this.list = res.data.list;
          console.log(this.list);
          this.listLoading = false;
        });
    },
  },
};
</script>
<style scoped>
</style>
